<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  <header class="mdl-layout__header">
    <div class="mdl-layout__header-row">
      <span class="mdl-layout__title"><%= title %></span>
    </div>
  </header>
  <script>
  var valid_name = false;
  var valid_branch = false;
  var valid_lane = false;
  var valid_trigger = false;
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("#submit_form")[0].disabled = true;
    document.querySelectorAll("#selected_lane")[0].style.display = "none";
    document.querySelectorAll("#lane_to_run")[0].style.display = "none";
    document.querySelectorAll("#loading")[0].style.display = "none";
    document.querySelectorAll("#trigger")[0].style.display = "none";
    document.querySelectorAll("#trigger_selector")[0].style.display = "none";
    document.querySelectorAll("#nightly")[0].style.display = "none";
    check_existence(document.querySelectorAll("input[name=project_name]")[0].value);
    setInterval(function() { 
      max_dots = 5;
      str = document.querySelectorAll("#loading")[0].querySelector("p").innerHTML;
      number_of_dots = (str.match(/\./gi) || []).length;
      if (number_of_dots < max_dots) {
        str += ".";
      } else {
        str = "Loading - this might take a while depending on the repo size"
      }
      document.querySelectorAll("#loading")[0].querySelector("p").innerHTML = str;  
    }, 1000);
  });
  function string_to_node(string) {
    var d = document.createElement('div');
    d.innerHTML = string;
    return d.firstChild;
  }
  var request = null;
  function check_branch(el) {
    if (request != null) {
      request.abort();
    }
    document.querySelectorAll("#submit_form")[0].disabled = true;
    document.querySelectorAll("#selected_lane")[0].style.display = "none";
    document.querySelectorAll("#selected_lane")[0].innerHTML = "";
    document.querySelectorAll("#loading")[0].style.display = "";
    document.querySelectorAll("#trigger")[0].style.display = "none";
    document.querySelectorAll("#trigger_selector")[0].style.display = "none";
    document.querySelectorAll("#nightly")[0].style.display = "none";
    request = new XMLHttpRequest();
    request.timeout = 1000 * 60 * 10; // 10 minutes
    request.responseType = 'json';
    request.open('GET', "/projects_erb/<%= repo %>/" + el.value + "/lanes", true);
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        var lanes = request.response;
        document.querySelectorAll("#loading")[0].style.display = "none";
        document.querySelectorAll("#selected_lane")[0].appendChild(string_to_node("<option disabled selected value>Select a lane</option>"));
        lanes.forEach(function (lane) {
            var name = lane["display_name"];
            var id = lane["platform"] + " " + lane["name"];
            document.querySelectorAll("#selected_lane")[0].append(string_to_node('<option value="'+ id +'">'+ name +'</option>'));
        });

        document.querySelectorAll("#selected_lane")[0].style.display = "";
        document.querySelectorAll("#lane_to_run")[0].style.display = "";
        valid_branch = true;
      } else {
        // We reached our target server, but it returned an error
      }
    };
    request.onerror = function() {
      // There was a connection error of some sort
    };
    request.onprogress = function () {
      document.querySelectorAll("#loading")[0].style.display = "";
    };
    request.send();
  }
  function check_lane() {
    document.querySelectorAll("#trigger")[0].style.display = "";
    document.querySelectorAll("#trigger_selector")[0].style.display = "";
    valid_lane = true;
  }
  function check_trigger(el) {
    var trigger_value = el.value;
    switch(trigger_value) {
      case "commit":
        valid_trigger = true;
        document.querySelectorAll("#nightly")[0].style.display = "none";
        check_nightly(null);
        break;
      case "manual":
        valid_trigger = true;
        document.querySelectorAll("#nightly")[0].style.display = "none";
        check_nightly(null);
        break;
      case "nightly":
        document.querySelectorAll("#nightly")[0].style.display = "";
        check_nightly(document.querySelectorAll("#nightly")[0]);
        break;
    }
  }
  function check_nightly(el) {
    if (el && el.value) {
      if (isFinite(parseInt(document.querySelectorAll("#minute")[0].value)) && isFinite(parseInt(document.querySelectorAll("#hour")[0].value))) {
        valid_trigger = true;
      }
      else {
        valid_trigger = false;
      }
    } else {
      if (isFinite(parseInt(document.querySelectorAll("#minute")[0].value)) && isFinite(parseInt(document.querySelectorAll("#hour")[0].value))) {
        valid_trigger = true;
      }
    }
  }
  var valid_request = null;
  function check_existence(value) {
    if (value) {
      if (valid_request != null) {
        valid_request.abort();
      }
      valid_request = new XMLHttpRequest();
      valid_request.timeout = 1000 * 60 * 10; // 10 minutes
      valid_request.responseType = 'json';
      valid_request.open('GET', "/projects_erb/" + value + "/valid", true);
      valid_request.onload = function() {
        if (valid_request.status >= 200 && valid_request.status < 400) {
          var data = valid_request.response;
          if (data["valid"] == false) {
            document.querySelectorAll("#project_name")[0].classList.add("is-dirty");
            document.querySelectorAll("#project_name")[0].classList.add("is-invalid");
            valid_name = false;
          } else {
            document.querySelectorAll("#project_name")[0].classList.remove("is-dirty");
            document.querySelectorAll("#project_name")[0].classList.remove("is-invalid");
            valid_name = true;
          }
        } else {
          // We reached our target server, but it returned an error
        }
      };
      valid_request.onerror = function() {
        // There was a connection error of some sort
      };
      valid_request.onprogress = function () {
      };
      valid_request.send();
    }
  }
  setInterval(function() {
    if (valid_branch && valid_name && valid_lane && valid_trigger) {
      document.querySelectorAll("#submit_form")[0].disabled = false;
    } else {
      document.querySelectorAll("#submit_form")[0].disabled = true;
    }
  }, 100);
  </script>
  
  <%= erb :"../../global/navigation" %>

  <main class="mdl-layout__content" style="padding: 40px">
    <form method="POST" action="/projects_erb/<%= repo %>/add">
      <h5>Adding <%= repo %></h5>
      <div class="mdl-textfield mdl-js-textfield" id="project_name">
        <input class="mdl-textfield__input" type="text" name="project_name" value="<%= repo %>" onchange="check_existence(this.value);">
        <label class="mdl-textfield__label" for="project_name">Project Name</label>
        <span class="mdl-textfield__error">Project Name must be unique</span>
      </div>
      <br />
      <h5>Select a branch</h5>
      <select name="branch" id="branch" onchange="check_branch(this)">
        <option disabled selected value>Select a branch</option>
        <% branches.each do |branch| %>
          <option value="<%= branch %>"><%= branch %></option>
        <% end %>
      </select>
      <br />
      <h5 id="lane_to_run">Lane to run</h5>
      <div id="loading">
        <br />
        <p>Loading...</p>
      </div>
      <select name="selected_lane" id="selected_lane" onchange="check_lane()">
      </select>
      <br />
      <h5 id="trigger">Select trigger</h5>
      <div id="trigger_selector">
        <select name="selected_trigger", id="selected_trigger", onchange="check_trigger(this)">
          <option disabled selected value>Select a trigger</option>
          <option value="commit">Commit</option>
          <option value="manual">Manual</option>
          <option value="nightly">Nightly</option>
        </select>
      <div id="nightly">
        <br />
        <br />
        <p>Select the nightly schedule</p>
        <select name="hour", id="hour", onchange="check_nightly(this)">
          <option disabled selected value>Select an hour</option>
          <% (0..23).each do |hour| %>
            <option value="<%= hour %>"><%= hour %></option>
          <% end %>
        </select>
        <select name="minute", id="minute", onchange="check_nightly(this)">
          <option disabled selected value>Select a minute</option>
          <% (0..59).each do |minute| %>
            <option value="<%= minute %>"><%= minute %></option>
          <% end %>
        </select>
      </div>
      <br />
      <br />
      <input id="submit_form" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent" type="submit" title="Save">
    </form>
  </main>
</div>
